<template>
	<div class="register-container">
		<header>
			<div class="logo"><img src="@/assets/images/logo.png" alt="" /><span>Vue3</span></div>
		</header>
		<Form></Form>
		<footer>
			<div class="link">巴拉巴拉巴拉巴拉</div>
			<div class="copyright">Copyright © 2022-2022 qzg</div>
		</footer>
	</div>
</template>

<script setup lang="ts">
import Form from "./components/form.vue";
</script>

<style scoped lang="scss">
.register-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: url("@/assets/images/reg_repeat_bg.png") repeat-x;
}
header {
	width: 850px;
	height: 164px;
	display: flex;
	background-color: pink;
	background: url("@/assets/images/bg_reg_wave.png") no-repeat;
	margin: 0 auto;
	.logo {
		width: 100px;
		display: flex;
		margin-left: 350px;
		align-items: center;
		opacity: 0.8;
		img {
			width: 100%;
		}
		span {
			text-indent: 10px;
			color: #79838d;
			font-size: 50px;
		}
	}
}
footer {
	display: flex;
	justify-content: space-evenly;
	width: 860px;
	font-size: 12px;
	color: #6e9ab8;
	margin-bottom: 20px;
}
</style>
